/**
 * 样式混入系统
 * 提供常用的样式组合，方便复用
 */

/* Flex 布局混入 */
@mixin flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

@mixin flex-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

@mixin flex-start {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

@mixin flex-end {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

@mixin flex-around {
	display: flex;
	align-items: center;
	justify-content: space-around;
}

@mixin flex-evenly {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
}

@mixin flex-col-center {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

@mixin flex-col-between {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
}

@mixin flex-col-start {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}

@mixin flex-col-end {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: flex-end;
}

@mixin flex-col-around {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
}

@mixin flex-wrap {
	display: flex;
	flex-wrap: wrap;
}

@mixin flex-nowrap {
	display: flex;
	flex-wrap: nowrap;
}

/* 卡片样式混入 */
@mixin card {
	background-color: $uni-bg-color;
	border-radius: $uni-border-radius-lg;
	padding: $uni-spacing-row-base;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

@mixin card-hover {
	@include card;
	transition: all 0.2s ease;
	
	&:hover {
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
		transform: translateY(-2px);
	}
}

/* 按钮样式混入 */
@mixin btn-base {
	padding: $uni-spacing-col-sm $uni-spacing-row-base;
	border-radius: $uni-border-radius-base;
	font-size: $uni-font-size-base;
	text-align: center;
	cursor: pointer;
	transition: all 0.2s ease;
}

@mixin btn-primary {
	@include btn-base;
	background-color: $uni-color-primary;
	color: $uni-text-color-inverse;
	
	&:hover {
		background-color: darken($uni-color-primary, 10%);
	}
	
	&:active {
		background-color: darken($uni-color-primary, 15%);
	}
}

@mixin btn-ghost {
	@include btn-base;
	background-color: transparent;
	border: 1px solid $uni-border-color;
	color: $uni-text-color;
	
	&:hover {
		background-color: $uni-bg-color-hover;
	}
}

/* 文本溢出混入 */
@mixin text-ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@mixin text-ellipsis-multi($lines: 2) {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: $lines;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 清除浮动 */
@mixin clearfix {
	&::after {
		content: "";
		display: table;
		clear: both;
	}
}

/* 居中混入 */
@mixin center-absolute {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

@mixin center-flex {
	display: flex;
	align-items: center;
	justify-content: center;
}

@mixin center-absolute-x {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

@mixin center-absolute-y {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

@mixin center-fixed {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* 阴影混入 */
@mixin shadow-sm {
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

@mixin shadow {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

@mixin shadow-md {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

@mixin shadow-lg {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* 过渡动画混入 */
@mixin transition {
	transition: all 0.2s ease;
}

@mixin transition-fast {
	transition: all 0.15s ease;
}

@mixin transition-slow {
	transition: all 0.3s ease;
}

/* 尺寸混入 */
@mixin size($width, $height: $width) {
	width: $width;
	height: $height;
}

@mixin square($size) {
	width: $size;
	height: $size;
}

@mixin circle($size) {
	width: $size;
	height: $size;
	border-radius: 50%;
}

/* 定位混入 */
@mixin absolute-full {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

@mixin fixed-full {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

@mixin absolute-top-left($top: 0, $left: 0) {
	position: absolute;
	top: $top;
	left: $left;
}

@mixin absolute-top-right($top: 0, $right: 0) {
	position: absolute;
	top: $top;
	right: $right;
}

@mixin absolute-bottom-left($bottom: 0, $left: 0) {
	position: absolute;
	bottom: $bottom;
	left: $left;
}

@mixin absolute-bottom-right($bottom: 0, $right: 0) {
	position: absolute;
	bottom: $bottom;
	right: $right;
}

/* 滚动混入 */
@mixin scroll-x {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
}

@mixin scroll-y {
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

@mixin scroll {
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

/* 文本混入 */
@mixin text-center {
	text-align: center;
}

@mixin text-left {
	text-align: left;
}

@mixin text-right {
	text-align: right;
}

@mixin text-nowrap {
	white-space: nowrap;
}

@mixin text-wrap {
	white-space: normal;
	word-wrap: break-word;
	word-break: break-all;
}

/* 边框混入 */
@mixin border($width: 1px, $style: solid, $color: $uni-border-color) {
	border: $width $style $color;
}

@mixin border-top($width: 1px, $style: solid, $color: $uni-border-color) {
	border-top: $width $style $color;
}

@mixin border-right($width: 1px, $style: solid, $color: $uni-border-color) {
	border-right: $width $style $color;
}

@mixin border-bottom($width: 1px, $style: solid, $color: $uni-border-color) {
	border-bottom: $width $style $color;
}

@mixin border-left($width: 1px, $style: solid, $color: $uni-border-color) {
	border-left: $width $style $color;
}

@mixin border-radius($radius: $uni-border-radius-base) {
	border-radius: $radius;
}

@mixin border-radius-top($radius: $uni-border-radius-base) {
	border-top-left-radius: $radius;
	border-top-right-radius: $radius;
}

@mixin border-radius-bottom($radius: $uni-border-radius-base) {
	border-bottom-left-radius: $radius;
	border-bottom-right-radius: $radius;
}

@mixin border-radius-left($radius: $uni-border-radius-base) {
	border-top-left-radius: $radius;
	border-bottom-left-radius: $radius;
}

@mixin border-radius-right($radius: $uni-border-radius-base) {
	border-top-right-radius: $radius;
	border-bottom-right-radius: $radius;
}

/* 间距混入 */
@mixin padding($top, $right: $top, $bottom: $top, $left: $right) {
	padding: $top $right $bottom $left;
}

@mixin margin($top, $right: $top, $bottom: $top, $left: $right) {
	margin: $top $right $bottom $left;
}

/* 显示/隐藏混入 */
@mixin hidden {
	display: none;
}

@mixin visible {
	visibility: visible;
}

@mixin invisible {
	visibility: hidden;
}

/* 透明度混入 */
@mixin opacity($value) {
	opacity: $value;
}

/* 响应式混入（通过代码实现，不使用 @media） */
@mixin responsive($property, $mobile-value, $desktop-value) {
	#{$property}: $mobile-value;
	
	/* 大屏设备通过 JS 动态设置 */
	/* #ifdef H5 */
	@media (min-width: 768px) {
		#{$property}: $desktop-value;
	}
	/* #endif */
}

